<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>my blog</title>
	<link rel="stylesheet" type="text/css" href="navigator.css">
	<link rel="stylesheet" type="text/css" href="leftList.css">
	<link rel="stylesheet" type="text/css" href="main.css">
	<link rel="stylesheet" type="text/css" href="bottom.css">
	<link rel="stylesheet" type="text/css" href="page.css">
	<style type="text/css">

		ul
		{
			list-style: none;
		}


		img
		{
			border-radius: 50%;
			border: 3px solid #EEE;
		}

		#welcome-box
		{
			display: flex;
			justify-content: center;
			align-items: center;
		}

		#pic
		{
			cursor: zoom-in;
		}

		.back
		{
			margin-left: 30px;
		}

		.preview
		{
			line-height: 180%;
		}
	</style>
</head>
<body id="body">
	<div id="navigator">
		<div id="header">
			<a href="index.html">
				<p id="logo">Blog</p>
			</a>
			<a href="index.html">
				<p class="link">首页</p>
			</a>
			<a href="archive.html">
				<p class="link">文章</p>
			</a>
			<a href="about.html">
				<p class="link">关于</p>
			</a>
			<a href="#">
				<p class="link">登录</p>
			</a>
		</div>
	</div>

	<div class="main" id="main-box">
		<div class="nav">
			<div class="leftList">
				<div class="article">
					<img src="187.jpg" id="pic">
					<div id="welcome-box">
						<p id="welcome">Welcome to my blog</p>
					</div>
				</div>


				<div class="article">
					<p class="listTitle">置顶文章</p>
					<a href="firstpage.html">
						<p class="articleTitle">第一篇文章</p>
					</a>
				</div>



				<div class="article">
					<p class="listTitle">最近文章</p>
					<a href="firstpage.html">
						<p class="articleTitle">第一篇文章</p>
					</a>

					<a href="#">
						<p class="articleTitle">第二篇文章</p>
					</a>
				</div>



				<div class="article">
					<p class="listTitle">跳转站</p>
					<a href="https://github.com/besthunterhj">
						<p class="articleTitle">我的Github</p>
					</a>	
				</div>
			</div>

			<div id="container">
				<div class="card">
					<p class="time">2019.9.4</p>
					<a href="firstpage.html">
						<h3 class="title">我的第一篇文章</h3>
					</a>
					<p class="preview">
						<span class="back">《数学之美》</span>原本是算法老师推荐的书籍，但我读后发现原来数学远不只是刷题，它还有许多美丽之处，好好探索数学之美吧！
					</p>
				</div>
				<div class="card">
					<p class="time">2020.1.4</p>
					<a href="#">
						<h3 class="title">Hello World</h3>
					</a>
					<p class="preview">This is an article</p>
				</div>
				<div class="card">
					<p class="time">2020.1.4</p>
					<a href="#">
						<h3 class="title">Hello World</h3>
					</a>
					<p class="preview">This is an article</p>
				</div>
				<div class="card">
					<p class="time">2020.1.4</p>
					<a href="#">
						<h3 class="title">Hello World</h3>
					</a>
					<p class="preview">This is an article</p>
				</div>
				<div class="card">
					<p class="time">2020.1.4</p>
					<a href="#">
						<h3 class="title">Hello World</h3>
					</a>
					<p class="preview">This is an article</p>
				</div>
			</div>


		</div>	
	</div>

	<div id="bottom">
		<div id="author">
			©2020 besthunterhj.github.io , Powered by 
			<a href="https://github.com/">
				<span class="thanks">Github</span>
			</a>
			<a href="https://github.com/besthunterhj">
				<span class="thanks">besthunterhj</span>
			</a>
		</div>
	</div>
</body>
<script type="text/javascript">
	let main = document.getElementById("main-box");
	let pic = document.getElementById("pic");

	pic.onclick = function()
	{
		window.open("187.jpg");
	}

	let navigator = document.getElementById("navigator");
	let beforeScroll = document.documentElement.scrollTop;

	window.onscroll = function()
	{
		let afterScroll = document.documentElement.scrollTop;
		if (afterScroll > 57 && afterScroll - beforeScroll < 0) 
		{
			navigator.className = "fix";
			main.style.margin = "67px 0 0 0"
		}
		else
		{
			navigator.className = "none";
			main.style.margin = "0";
		}

		beforeScroll = afterScroll;
	}
</script>
</html>
